<!DOCTYPE html>
<html>
<head>
    <title>Flat Admin V.2 - Free Bootstrap Admin Templates</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <frame-options policy="SAMEORIGIN"/>
    <#scripts />
</head>

<body class="flat-blue">
<div class="row content" id="main">
    <div class="col-xs-12 content">
        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <div class="title">请填写销售员基本信息</div>
                </div>
            </div>
            <div class="card-body">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <input type="hidden" id="id" value="${id!''}">
                    <el-form-item label="销售员名称" prop="saleName">
                        <el-input v-model="ruleForm.saleName"></el-input>
                    </el-form-item>
                    <el-form-item label="销售员年龄" prop="age">
                        <el-input v-model="ruleForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="销售员邮箱" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="销售员手机" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="销售员地址" prop="address">
                        <el-input v-model="ruleForm.address"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button @click="cancel" type="danger">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#main',
        data: {
            ruleForm: {
                id:"",
                saleName:"",
                age:"",
                email:"",
                phone:"",
                address:""
            },
            rules: {
                saleName:[
                    { required: true, message: '请输入销售员名称', trigger: 'blur' },
                    { max: 10, message: '长度在不能超过 10 个字符', trigger: 'blur' }
                ],
                age:[
                    { required: true, message: '请输入销售员年龄', trigger: 'blur' },
                    { max:20, message: '长度在不能超过 3 个字符', trigger: 'blur' }
                ],
                email:[
                    { required: true, message: '请输入销售员邮箱', trigger: 'blur' },
                    { max: 20, message: '长度在不能超过 20 个字符', trigger: 'blur' }
                ],
                phone:[
                    { required: true, message: '请输入销售员手机', trigger: 'blur' },
                    { max: 12, message: '长度在不能超过 12 个字符', trigger: 'blur' }
                ],
                address:[
                    { required: true, message: '请输入销售员地址', trigger: 'blur' },
                    { max: 20, message: '长度在不能超过 20 个字符', trigger: 'blur' }
                ]
            }

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/sale/edit', vm.getParams()).then(function (response) {
                            var data = response.data;
                            if (data.code == 200) {
                                parent.vm.onload();
                                parent.layer.closeAll();
                            }
                        }).catch(function (error) {
                            layer.msg(error);
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                vm.onload();
            },
            cancel: function () {
                parent.layer.closeAll();
            },
            onload: function () {
                axios.get('/sale/get/' + $("#id").val()).then(function (response) {
                    var data = response.data;
                    if (data.code == 200) {
                        vm.ruleForm = data.data;
                    }
                }).catch(function (error) {
                    layer.msg("获取菜单信息失败");
                });
            },
            getParams: function () {
                var params = new URLSearchParams();
                params.append('saleName', vm.ruleForm.saleName);
                params.append('age', vm.ruleForm.age);
                params.append('email', vm.ruleForm.email);
                params.append('phone', vm.ruleForm.phone);
                params.append('address', vm.ruleForm.address);
                return params;
            }
        }
    });
    vm.onload();
</script>
</body>

</html>
